<!-- 新的文章列表 -->
<template>
	<view>
		<view v-if="isNull" class="none">
			<i class="iconfont iconwujilu"></i>
			<text>暂无数据</text>
		</view>
		<view v-else class="item" v-for="(item,index) in list" :key="index" @tap="preview(item,index)">
			<view class="head">
				<view class="headImg" @click.stop.prevent="person(item)">
					<headimg :realSrc="item.avatar"></headimg>
				</view>
				<view @click.stop.prevent="person(item)">
					<view class="head_name">{{item.nicheng ? item.nicheng :'未设置昵称'}}</view>
					<view class="head_time">{{item.time}}</view>
				</view>
			</view>

			<view>
				<view>
					<view class="title">{{item.title}}</view>
					<view class="content" v-if="item.article_video == 1&&item.type == 1" v-html="item.content"></view>
				</view>
				<view class="uni-flex uni-row content2" v-if="item.article_video == 1&&item.type == 2" @click.stop.prevent="content2(item)">
					<view>{{item.subhead_title}}</view>
					<view class="fengmian">
						<image :src="item.img_url?item.img_url:'../../static/images/fengmian.png'" mode="aspectFill"></image>
					</view>
				</view>
				
				<view class="content_img" v-if="item.img_url && item.type == 1">
					<image :src="item.img_url" mode="aspectFill"></image>
				</view>
				<template v-if="!item.img_url && item.type == 1">
					<view class="content_img" v-if="item.article_video == 1 && item.imgList && item.imgList.length > 0 && (!item.videoList || (item.videoList && item.videoList.length == 0))">
						<image :src="item.imgList[0]" mode="aspectFill"></image>
					</view>
					<view class="videoBg" v-if="((item.article_video == 1 && item.videoList && item.videoList.length > 0) || item.article_video == 2)">
						<image :src="item.videoImage_url" mode="aspectFill"></image>
						<i class="iconfont iconbofang"></i>
					</view>
				</template>
			</view>

			<view class="bottom">
				<view class="bottom_item" :style="item.is_like == 2 ? 'color:#00D5A2' : ''" @tap.stop="isLike(item)">
					<view><i class="iconfont iconzanpress"></i></view>
					<view class="bottom_item_text">点赞</view>
				</view>
				<view class="bottom_item" @tap.stop="preview(item,index,'focus')">
					<view><i class="iconfont iconxiaoxi"></i></view>
					<view class="bottom_item_text">评论</view>
				</view>
				<view class="bottom_item" @tap.stop="preview(item,index,'share')">
					<view><i class="iconfont iconfenxiang1"></i></view>
					<view class="bottom_item_text">分享</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import headimg from '@/components/head_img.vue';
	export default {
		components: {
			headimg
		},
		props: {
			list: Array,
			status: String,
			contentText: Object,
			isNull: { //是否为空列表
				type: [Boolean,String],
				default: false
			},
			stateType: String, // 0为默认抖教文章 
			addType: String //附加条件: 0+0为首页抖教推荐  0+1为智囊团  1+3为家文化&孩子-目标、成长、才艺  2+2为育儿经&育儿经-我的  3+4为我的智囊团 0+999为机构资讯
		},
		data() {
			return {}
		},
		watch: {
			list(newValue, oldValue) {
				this.list.forEach((item, index) => {
					if (this.stateType == 2) {
						if (item.im_title) {
							item.im_title = item.im_title.replace(/amp;/g, '').replace(/&lt;/g, '<').replace(/&gt;/g,'>').replace(/[, ]/g, '');
						}
					} else {
						if (item.title) {
							item.title = item.title.replace(/amp;/g, '').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/[, ]/g, '');
						}
					}
					if (item.subhead_creat_time) {
						item.ftime = util.getBriefTime(item.subhead_creat_time);
					}
				})
			}
		},
		methods: {
			preview(item,index, shareType) {
				console.log('item123',item);
				let isShare = false;
				let isSendFocus = false;
				if (shareType == 'share') {
					isShare = true;
				} else if (shareType == 'focus') {
					isSendFocus = true;
				}
				var id = '';
				var url = '';
				if ((this.stateType == 0 && this.addType != 999) || this.stateType == 3) {
					id = item.article_id
				} else if (this.stateType == 1) {
					id = item.patriarch_article_id
				} else if (this.stateType == 2) {
					id = item.im_id
				} else if (this.addType == 999) {
					id = item.information_id
				}
				if (item.article_video_id) {
					id = item.article_video_id
					if (item.article_video == 2) {
						// 跳转视频页面
						uni.navigateTo({
							url: '../../pages/topic/videoDetail?index=0&pagesize=1&type=1&users_type=1&article_video_id=' +id
						})
						return
					}
				}
				if (this.stateType == 2 && item.is_show != 1) {
					uni.setStorageSync('articleIndex',index);
					url = '/pages/articleModule/newarticle-detail?stateType=' + this.stateType + '&addType=' + this
						.addType +
						'&article_id=' + id + '&isShare=' + isShare + '&isSendFocus=' + isSendFocus + '&releaseType=' + item.is_show+'&top='+1
				} else {
					uni.setStorageSync('articleIndex',index);
					var adminUserId = '';
					if (this.addType == 999) {
						adminUserId = item.admin_user_id;
					}
					url = '/pages/articleModule/newarticle-detail?stateType=' + this.stateType + '&addType=' + this
						.addType +
						'&article_id=' + id + '&isShare=' + isShare + '&isSendFocus=' + isSendFocus + '&admin_user_id=' + adminUserId+'&top='+1
				}
				uni.navigateTo({
					url: url
				})
			},
			/* 文章喜欢 */
			isLike(item) {
				if (item.is_like == 2) {
					this.changeIslike(item, 1);
				} else {
					this.changeIslike(item, 2);
				}
			},
			// 个人主页
			person(user_id) {
				uni.navigateTo({
					url: '/pages/school/my-center?user_id=' + user_id
				})
			},
			/* 点赞*/
			changeIslike(item, state) {
				var id = '';
				if ((this.stateType == 0 && this.addType != 999) || this.stateType == 3) {
					id = item.article_id
				} else if (this.stateType == 1) {
					id = item.patriarch_article_id
				} else if (this.stateType == 2) {
					id = item.im_id
				} else if (this.addType == 999) {
					id = item.information_id
				}
				if (item.article_video_id) {
					id = item.article_video_id
				}
				var data = {
					article_id: id,
					is_like: state
				}
				var url = '';
				if (this.addType == 1) {
					url = 'user/wisdom.Users/isLike';
				} else {
					url = 'user/article.Users/isLike';
				}
				this.$api.apiPost(url, data).then(res => {
					if (res.data.code == 200) {
						if (item.is_like == 1) {
							item.dislikenum--
							if (state == 2) {
								item.likenum++
							}
						} else if (item.is_like == 2) {
							item.likenum--
							if (state == 1) {
								item.dislikenum++
							}
						} else {
							if (state == 1) {
								item.dislikenum++
							} else if (state == 2) {
								item.likenum++
							}
						}
						item.is_like = data.is_like;
						if (item.is_like == 2) {
							this.collect = '点赞成功';
						} else {
							this.collect = '取消点赞';
						}
						uni.showToast({
							title: this.collect,
							icon: 'none'
						})
						this.$forceUpdate();
					}
				})
			},
			content2(item){
				console.log(item);
				uni.navigateTo({
					url: '/pages/articleModule/newarticle-detail?stateType=' + 0 + '&addType=' + 9 +'&article_id=' + item.article_fid + '&isShare='+ false + '&admin_user_id='+'&top='+2,
				});
			},
			person(item){
				console.log(item.user_id);
				uni.navigateTo({
					url: '/pages/school/my-center?user_id='+item.user_id,
				});
			}
		}
	}
</script>

<style lang="scss">
	.none {
		color: #999999;
		text-align: center;
	}
	.none .iconwujilu {
		color: #E5E5E5;
		font-size: 306upx;
		line-height: 1;
		display: block;
	}
	
	.none text {
		color: #E5E5E5;
		font-size: 46upx;
		display: block;
	}
	.item {
		width: 94%;
		margin: auto;
		margin-top: 30upx;
	}

	.head {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.headImg {
			width: 88upx;
			height: 88upx;
			border-radius: 50%;
			margin-right: 20upx;
			overflow: hidden;
		}

		.head_name {
			color: #333333;
			font-size: 26upx;
		}

		.head_time {
			color: #C0C4CC;
			font-size: 22upx;
			margin-top: 10upx;
		}
	}

	.title {
		font-size: 34upx;
		color: #333333;
		font-weight: 500;
		margin-top: 30upx;
		word-break: break-word;
	}

	.content {
		font-size: #333333;
		font-size: 30upx;
		margin-top: 20upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3; // 行数
		word-break: break-word;
		line-height: 20px;
		max-height: 60px;
	}
	
	.content2{
		margin-top: 20upx;
		background-color: #EEEEEE;
		height: 230rpx;
		display: flex;
		align-items: center;
		
		view:nth-child(1){
			margin: 0 30rpx;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			overflow: hidden;
			word-break: break-all;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			text-align: left;
			color: #000000;
			font-weight: bold;
			font-size: 32rpx;
		}
		
		view:nth-child(2){
			-webkit-flex: 1;
			flex: 1;
			margin-top: 34rpx;
			margin-bottom: 34rpx;
			margin-right: 50rpx;
		}
		
		image{
			width: 240rpx;
			height: 170rpx;
			border-radius: 10rpx;
		}
		
		.fengmian{
			text-align: right;
		}
	}

	.content img {
		height: 388upx;
	}

	.content_img {
		margin-top: 20upx;
		width: 100%;
		height: 388upx;
		border-radius: 10upx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}

	}

	.videoBg {
		position: relative;
		margin: 20upx 0;
		width: 100%;
		height: 388upx;
		border-radius: 10upx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}

		& i {
			position: absolute;
			z-index: 9;
			color: #FFFFFF;
			font-size: 80upx;
			background: rgba(0, 0, 0, 0.5);
			width: 100%;
			height: 100%;
			border-radius: 10upx;
			display: inline-flex;
			justify-content: center;
			align-items: center;
		}
	}

	.bottom {
		display: flex;
		justify-content: flex-end;
		margin-top: 24upx;

		.bottom_item {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 40upx;
			color: #999999;

			.bottom_item_text {
				font-size: 22upx;
				margin-left: 5upx;
			}

			i {
				font-size: 28upx;
			}

			// .iconzanpress {
			// 	font-size: 28upx;
			// }

			// .iconpinglun2 {
			// 	font-size: 28upx;
			// }

			// .iconforward-null {
			// 	font-size: 28upx;
			// }
		}
	}
</style>
